<template>
  <div class="app-container">
    <el-row>
      <div class="search-container">
        <el-input v-model="traceId" class="search-input" placeholder="溯源编号" />
        <el-button type="success" @click="query()">查询</el-button>
      </div>
      <br>
    </el-row>
    <el-row :gutter="30" class="info-container">
      <el-col :span="6" :xs="24">
        <el-form>
          <el-form-item><el-tag class="section-title">产品基本信息</el-tag></el-form-item>
          <el-form-item label="产品ID:">{{ good.productId }}</el-form-item>
          <el-form-item label="生产人:">{{ good.userName }}</el-form-item>
          <el-form-item label="电话:">{{ good.phone }}</el-form-item>
          <el-form-item label="净含量(克):">{{ good.weight }}</el-form-item>
          <el-form-item label="生产车间:">{{ good.location }}</el-form-item>
          <el-form-item label="生产工时(H)">{{ good.time }}</el-form-item>
          <el-form-item label="保存方法">{{ good.store }}</el-form-item>
          <el-form-item label="食用推荐">{{ good.recommended }}</el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6" :xs="24">
        <el-form>
          <el-form-item><el-tag class="section-title">加工公司信息</el-tag></el-form-item>
          <el-form-item label="工厂名称:">{{ company.name }}</el-form-item>
          <el-form-item label="工厂地点:">{{ company.location }}</el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-tabs v-model="activeName">
          <el-tab-pane label="种植过程" name="1">
            <el-row :gutter="8">
              <el-col v-for="(productRecord, index) in productRecord" :key="index" :span="24" class="product-record">
                <el-card>
                  <el-col :span="12">
                    <el-row>
                      <el-col :span="24">生长情况:{{ productRecord.growthSituation }}</el-col>
                    </el-row>
                    <br>
                    <el-row>
                      <el-col :span="24">光照情况:{{ productRecord.illumination }}</el-col>
                    </el-row>
                    <br>
                    <el-row>
                      <el-col :span="24">水分:{{ productRecord.water }}</el-col>
                    </el-row>
                    <br>
                    <el-row>
                      <el-col :span="24">温度:{{ productRecord.temperature }}</el-col>
                    </el-row>
                    <br>
                    <el-row>
                      <el-col :span="24">记录时间:{{ productRecord.recordTime }}</el-col>
                    </el-row>
                    <br>
                    <el-row>
                      <el-col :span="24">备注:{{ productRecord.remark }}</el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="12"><img class="product-image" :src="productRecord.picture"></el-col>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="流通行为" name="2">
            <div class="block">
              <el-timeline v-for="(detail,index) in transportRecordVos" :key="index">
                <el-timeline-item :timestamp="detail.transport_to_chain_time" placement="top">
                  <el-card>
                    <h4 class="location-info">经过地:{{ detail.locationInfo }}</h4>
                    <p>流通顺序: {{ index + 1 }}</p>
                    <p>司机:{{ detail.name }}</p>
                    <p>电话:{{ detail.phone }}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
          <el-tab-pane label="农产信息" name="4">
            <el-row><el-col :span="24">电话:{{ product.userTelephone }}</el-col></el-row><br><br>
            <el-row><el-col :span="24">种植地址:{{ product.productionLocation }}</el-col></el-row><br><br>
            <el-row><el-col :span="24">种植方式:{{ product.productionMethod }}</el-col></el-row><br><br>
            <el-row><el-col :span="24">作物类型:{{ product.type }}</el-col></el-row><br><br>
            <el-row><el-col :span="24">注册时间:{{ product.productDate }}</el-col></el-row><br><br>
            <el-row><el-col :span="24">备注:{{ product.description }}</el-col></el-row><br>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { query } from '@/api/task'
import { BmlLushu } from 'vue-baidu-map'

export default {
  data() {
    return {
      components: { BmlLushu },
      option: {}, // You may need to define the actual data for avue-data-tabs
      traceId: this.$route.query.traceId||'',
      userName: '',
      good: {},
      company: {},
      taskRecord: [],
      productRecord: [],
      transportRecordVos: [],
      product: {},
      task: {},
      activeName: '1',
      // 百度地图的
      center: { lng: 110.8217, lat: 31.3137 },
      startCoord: { lng: 110.8217, lat: 31.3137 },
      endCoord: { lng: 120.8742, lat: 33.3966 },
      play: true, // 播放状态
      path: [

      ], // 路径数组
      icon: { // 图标配置
        url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
        size: { width: 52, height: 26 },
        opts: { anchor: { width: 27, height: 13 }}
      },
      speed: 80000
    }
  },
  mounted(){
    if(this.traceId) {
      this.query()
    }
  },
  methods: {
    query() {
      const numericTraceId = this.traceId
      query(numericTraceId)
        .then(response => {
          console.log(response.data)
          this.good = response.data.good
          this.company = response.data.company
          this.task = response.data.task
          this.taskRecord = response.data.taskRecord
          this.product = response.data.product
          this.productRecord = response.data.productRecord
          this.transportRecordVos = response.data.transportRecordVos
          console.log(this.TraceVo)
        })
        .catch(error => {
          console.error('Error fetching options:', error)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  padding: 20px 20px 10px;
  border-radius: 4px;
  margin: 0px auto;
  background: #ffffff;

  box-sizing: border-box;
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

#input-box {
  display: block;
  width: 100%;
  height: 46px;
  margin-bottom: 15px;
  border: none;
  border-radius: 6px;
  background: #add8e6;
  padding: 0 5px;
  text-align: right;
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 1px;
}
.search-container {
  display: flex;
  align-items: center;
}

.search-input {
  width: 50%; /* Adjust the width according to your preference */
  margin-right: 10px; /* Add some space between the input box and the button */
  margin-left: 10px
}
.product-image {
  width: 80%;
}
</style>
